<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 文章管理 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
</head>
<style>
    .layui-form-label {
        width: 100px;
    }
    .layui-input-block {
        margin-left: 130px;
    }
    .layui-form-select dl {
        z-index: 9999;
    }
</style>
<body>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <input type="hidden" name="id" value="{$find.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">页面名称</label>
        <div class="layui-input-inline" style="width: 293px;">
            <input type="text" name="name" value="{$find.name}" lay-verify="required" placeholder="页面名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">背景图片</label>
        <div class="layui-input-inline">
            <input type="text"  name="background_image" value="{$find.background_image}"  placeholder="请上传图片" autocomplete="off" class="layui-input">
        </div>
        <button style="float: left;" type="button" class="layui-btn" id="demo">上传图片</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">背景颜色</label>
        <div class="layui-input-inline" style="width: 190px;">
            <input type="text" name="background_color" value="{$find.background_color}" readonly lay-verify="required" placeholder="请选择背景颜色" class="layui-input" id="test-form-input">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="test-form"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">展现形式</label>
        <div class="layui-input-block">
            <input type="radio" name="form" value="1" lay-filter="form" title="单列表" {if condition="!$find"}checked{/if}{eq name="find.form" value="1"}checked{/eq}>
            <input type="radio" name="form" value="2" lay-filter="form" title="双列表" {eq name="find.form" value="2"}checked{/eq}>
            <input type="radio" name="form" value="3" lay-filter="form" title="自定义" {eq name="find.form" value="3"}checked{/eq}>
        </div>
    </div>
    <div id="diao">
        <div class="layui-form-item">
            <label class="layui-form-label">调用数据</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="2" lay-filter="type" title="团购" {eq name="find.type" value="2"}checked{/eq}>
                <input type="radio" name="type" value="3" lay-filter="type" title="秒杀" {eq name="find.type" value="3"}checked{/eq}>
            </div>
        </div>
        <div id="coupon" class="layui-hide">
            <div class="layui-form-item">
                <label class="layui-form-label">调用优惠券</label>
                <div class="layui-input-inline">
                    <input type="text" id="coupon2" value="{$find.coupon_name}" ts-selected="{$find.coupon}" lay-verify="required" placeholder="调用优惠券" autocomplete="off" class="layui-input">
                    <input type="hidden" name="coupon" value="{$find.coupon}">
                </div>
            </div>
        </div>
        <div id="shop" class="layui-hide">
            <div class="layui-form-item">
                <label class="layui-form-label">调用商品</label>
                <div class="layui-input-inline">
                    <input type="text" id="shop2" value="{$find.shop_name}" ts-selected="{$find.shop}" lay-verify="required" placeholder="调用商品" autocomplete="off" class="layui-input">
                    <input type="hidden" name="shop" value="{$find.shop}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">调用条数</label>
            <div class="layui-input-inline">
                <input type="text" name="num" value="{$find.num}" lay-verify="required|number" placeholder="调用条数" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">进入页面弹出</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="enter_popup_open" value="1"  lay-skin="switch" lay-text="开启|关闭" {if condition="$find.enter_popup_open eq 1"}checked{/if}>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="enter_popup_page">
                    <option value="">请选择弹出框</option>
                    {volist name="popup" id="vo"}
                    <option value="{$vo.id}" {eq name="find.enter_popup_page" value="$vo.id"}selected{/eq}>{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">浏览页面弹出</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="browse_popup_open" lay-skin="switch" lay-text="开启|关闭" {if condition="$find.browse_popup_open eq 1"}checked{/if}>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="number" name="browse_popup_miao" value="{$find.browse_popup_miao}" placeholder="浏览秒数" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="browse_popup_page">
                    <option value="">请选择弹出框</option>
                    {volist name="popup" id="vo"}
                    <option value="{$vo.id}" {eq name="find.browse_popup_page" value="$vo.id"}selected{/eq}>{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-hide" id="form">
        <label class="layui-form-label">自定义页面</label>
        <div class="layui-input-block">
            <script id="content" type="text/plain">
                {$find.content}
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">页面规则</label>
        <div class="layui-input-block">
            <script id="rule" type="text/plain">
                {$find.rule}
            </script>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload', 'colorpicker', 'tableSelect', 'common'], function(){
        var $ = layui.$,
                form = layui.form,
                upload = layui.upload,
                colorpicker = layui.colorpicker,
                tableSelect = layui.tableSelect,
                common = layui.common;

        //编辑器
        var content = UE.getEditor('content', {
            initialFrameWidth: 750,
            initialFrameHeight: 320
        });

        //编辑器
        var rule = UE.getEditor('rule', {
            initialFrameWidth: 750,
            initialFrameHeight: 320
        });

        tableSelect.render({
            elem: "#coupon2",	//定义输入框input对象
            checkedKey: 'id', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'name',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '搜索优惠券名称',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '/admin/Product/coupon/status/2',
                method: 'post',
                cols: [[
                    {type: 'radio'},
                    {field: 'name', title: '优惠券名称', width: 400},
                    {field: 'discount', title: '价值', width: 100, templet: function(d){
                        if (d.form == '0'){
                            return d.discount + '元';
                        }else{
                            return '订单总价的' + d.discount + '折';
                        }
                    }},
                    {field: 'limit', title: '领取限制', width: 100, templet: function(d){
                        if (d.limit == '0'){
                            return '不限';
                        }else{
                            return '限领' + d.limit + '份';
                        }
                    }},
                    {field: 'valid', title: '有效期', width: 100, templet: function(d){
                        if (d.limit == '0'){
                            return '不限';
                        }else{
                            return '限领' + d.limit + '份';
                        }
                    }},
                    {field: 'receive', title: '已领取', width: 100},
                    {field: 'use', title: '已使用', width: 100},
                ]]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var field = data.data;
                $("#coupon2").val(field[0].name);
                $("#coupon2").nextAll('input[name=coupon]').val(field[0].id);
            }
        });


        tableSelect.render({
            elem: "#shop2",	//定义输入框input对象
            checkedKey: 'id', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'name',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '搜索商品名称',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '/admin/Product/product',
                method: 'post',
                cols: [[
                    {type: 'checkbox'},
                    {field: 'name', title: '商品名称', width: 400},
                    {field: 'stock', title: '库存', width: 100},
                    {field: 'volume', title: '销量', width: 100},
                    {field: 'time', title: '添加时间', width: 200, templet: function(d){ return common.formatDateTime(d.time); }}
                ]],
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var field = data.data;
                var name = [];
                var id = [];
                for (var i = 0; i < field.length; i++){
                    name.push(field[i].name);
                    id.push(field[i].id);
                }
                $("#shop2").val(name.join(','));
                $("#shop2").nextAll('input[name=shop]').val(id.join(','));
            }
        });

        //表单赋值
        colorpicker.render({
            elem: '#test-form'
            ,color: "{$find.background_color ?? 'rgba(255, 255, 255, 1)'}"
            ,format: 'rgb'
            ,predefine: true
            ,alpha: true
            ,done: function(color){
                $('#test-form-input').val(color);
            }
        });

        //普通图片上传
        upload.render({
            elem: '#demo',
            url: '/admin/Common/upload/filename/background',
            accept: 'file',
            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $("input[name=background_image]").val(res.img);
                layer.msg("上传成功", {icon: 1});
            }
        });

        if ('{$find.form}' == 3){
            $("#form").removeClass('layui-hide');
            $("#diao").addClass('layui-hide');
            $("input[name=num]").removeAttr("lay-verify");
            $("#coupon2").removeAttr("lay-verify");
            $("#shop2").removeAttr("lay-verify");
        }else{
            $("#form").addClass('layui-hide');
            $("#diao").removeClass('layui-hide');
            $("input[name=num]").attr("lay-verify", "required|number");
            $("#coupon2").attr("lay-verify", "required");
            $("#shop2").attr("lay-verify", "required");
        }

        form.on('radio(form)', function(data){
            if (data.value == 3){
                $("#form").removeClass('layui-hide');
                $("#diao").addClass('layui-hide');
                $("input[name=num]").removeAttr("lay-verify");
                $("#coupon2").removeAttr("lay-verify");
                $("#shop2").removeAttr("lay-verify");
            }else{
                $("#form").addClass('layui-hide');
                $("#diao").removeClass('layui-hide');
                $("input[name=num]").attr("lay-verify", "required|number");
                $("#coupon2").attr("lay-verify", "required");
                $("#shop2").attr("lay-verify", "required");
            }
        });

        if ('{$find.type}' == 7){
            $("#coupon").removeClass('layui-hide');
            $("#coupon2").attr("lay-verify", "required");
            $("#shop").addClass('layui-hide');
            $("#shop2").removeAttr("lay-verify");
        } else if ('{$find.type}' == 8){
            $("#shop").removeClass('layui-hide');
            $("#shop2").attr("lay-verify", "required");
            $("#coupon").addClass('layui-hide');
            $("#coupon2").removeAttr("lay-verify");
        }else{
            $("#coupon").addClass('layui-hide');
            $("#coupon2").removeAttr("lay-verify");
            $("#shop").addClass('layui-hide');
            $("#shop2").removeAttr("lay-verify");
        }

        form.on('radio(type)', function(data){
            if (data.value == 7){
                $("#coupon").removeClass('layui-hide');
                $("#coupon2").attr("lay-verify", "required");
                $("#shop").addClass('layui-hide');
                $("#shop2").removeAttr("lay-verify");
            } else if (data.value == 8){
                $("#shop").removeClass('layui-hide');
                $("#shop2").attr("lay-verify", "required");
                $("#coupon").addClass('layui-hide');
                $("#coupon2").removeAttr("lay-verify");
            }else{
                $("#coupon").addClass('layui-hide');
                $("#coupon2").removeAttr("lay-verify");
                $("#shop").addClass('layui-hide');
                $("#shop2").removeAttr("lay-verify");
            }
        });

        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            field.content = content.getContent();
            field.rule = rule.getContent();
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: "POST",
                url: "{:url('System/content_page_add')}",
                data: {field:field},
                dataType: "json",
                success: function(e){
                    if (e.code == 200){
                        layer.msg(e.data);
                        setTimeout(function () {
                            open_window.layui.table.reload('demo'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        }, 500)
                    }else{
                        layer.msg(e.msg);
                    }
                }
            });
        });

        //监听提交
        form.on('submit(layuiadmin-app-form-edit)', function(data){
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            field.content = content.getContent();
            field.rule = rule.getContent();
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: "POST",
                url: "{:url('System/content_page_edit')}",
                data: {field:field},
                dataType: "json",
                success: function(e){
                    if (e.code == 200){
                        layer.msg(e.data);
                        setTimeout(function () {
                            open_window.layui.table.reload('demo'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        }, 500)
                    }else{
                        layer.msg(e.msg);
                    }
                }
            });
        });
    })

    var open_window;
    function child(d) {
        open_window = d;
    }
</script>
</body>
</html>